//
// Label
// --------------------------------------------------


@label-height: 26px;
@label-padding-horizontal: 10px;
@badge-height: 20px;
@badge-padding-horizontal: 4px;

.label {
	display: inline-block;
	position: relative;
	height: @label-height;
	line-height: @label-height;
	padding: 0 @label-padding-horizontal;
	margin: 0 5px 5px 0;
	background-color: #e8e8e8;
	border-radius: 16px;

	i {
		margin-right: 8px;
		color: @icon-color-default;
	}

	img {
		float: left;
	    height: @label-height;
	    width: @label-height;
	    margin: 0 8px 0 -@label-padding-horizontal;
	    border-radius: 50%;
	}

	.close {
		margin: 0 0 0 8px;
		cursor: pointer;

		&:hover {
			color: @text-color-base;
		}
	}

	&.primary {
		background-color: @primary-color;
	}

	&.green {
		background-color: @green;
	}

	&.red {
		background-color: @red;
	}

	&.teal {
		background-color: @teal;
	}

	&.yellow {
		background-color: @yellow;
	}

	&.primary,
	&.green,
	&.red,
	&.teal,
	&.yellow {
		color: #fff !important;

		i {
			color: #fff;
		}
		.close {
			color: rgba(255, 255, 255, 0.8);
		}
		.close:hover {
			color: #fff;
		}
	}
}

.badge {
	display: block;
	position: absolute;
	height: @badge-height;
    min-width: @badge-height;
    top: 0;
    left: 100%;
	padding: 0 @badge-padding-horizontal;
    margin: -@badge-height/2 0 0 -@badge-height/2;
    line-height: @badge-height;
    background-color: @primary-color;
    color: #fff;
    text-align: center;
    font-size: @font-size-base - 2;
    z-index: 100;
    border-radius: 16px;
    box-shadow: 0 0 0 1px #fff;

    &.green {
    	background-color: @color-success;
    }

    &.red {
    	background-color: @color-danger;
    }

    &.teal {
    	background-color: @teal;
    }

    &.yellow {
    	background-color: @yellow;
    }

    &.primary,
    &.green,
    &.red,
    &.teal,
    &.yellow {
    	color: #fff !important;
    }
}